<template>
  <div class="maindiv">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24">
            <el-card class="title_card">vallis计算平台(内测版,非最终版本)</el-card>
          </el-col>
        </el-row></el-header
      >
      <el-main>
        <el-row>
          <el-col :span="24">
            <el-card class="list_card"  @click.native="toStatistics()" >
              <p class="title_card_p" align="right">统计</p>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-card class="list_card  ready" 
              ><p class="title_card_p" align="right">计算</p>
                 <p  class="title_card_p_small" align="right" >注：本功能将于10月1号上线</p> 
              
              </el-card
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card class="list_card" @click.native="toPlan()"
              ><p class="title_card_p" align="right">计划</p></el-card
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card class="list_card" @click.native="toDonate()"           ><p class="title_card_p" align="right">捐赠</p>
              </el-card
            >
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.el-header{
  margin-bottom: 30px;
}
.maindiv {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #0e6251;
}

        
.el-row{
 background-color: #0e6251;

}
.title_card {
   border:0;
  background-color: #17A589;
  margin: 15px;
  border-radius: 15px;
}
.list_card {
   border:0;
 background-color: #17A589;
  margin: 15px;
  height: 150px;
  border-radius: 15px;
}
.title_card_p {
  margin-top: 15%;
  margin-left: 55%;
}
.ready{
 
  background-color: #117864;
}
.title_card_p_small{
font-size: 50%;
color: #E74C3C;
}
</style>
<script>
export default {
  data() {
    return {};
  },
  methods: {
toPlan(){
  
    this.$router.push("plan");
},
toDonate(){
 this.$router.push("donate");
}
,toStatistics(){
 this.$router.push("statistics");

}
  },
};
</script>